<template>
  <div class="houseeBox">
    <breadcrumb
      :titleArr="titleArr"
      @back="breadcrumbBack"
      class="bread-crumb"
    ></breadcrumb>
    <el-tabs v-model="firstName">
      <el-tab-pane label="仓库信息" name="houseInfo">
        <el-form :model="accessForm" :rules="rules" ref="accessForm">
          <el-form-item label="仓库名称" prop="name">
            <el-input
              v-model="accessForm.name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库管理员" prop="admin">
            <m7Select
              filterable
              v-model="accessForm.admin"
              size="mini"
              :options="openUserList"
              :defaultProps="{ value: '_id', label: 'agentName' }"
              placeholder="请选择"
            >
            </m7Select>
          </el-form-item>
          <el-form-item label="所属地区" prop="areaList">
            <el-cascader
              v-model="accessForm.areaList"
              :options="areaOptions"
              :props="props"
              clearable
              filterable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="accessForm.address"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="memo" class="remarks">
            <el-input type="textarea" :rows="4" v-model="accessForm.memo">
            </el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="more-btn">
      <el-button class="cancel" size="mini" @click="cancelFun">取消</el-button>
      <el-button size="mini" type="primary" @click="saveFun">提交</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction, deepClone } from '@/utils/common'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { Form as ElForm } from 'element-ui'
import { Store } from 'vuex/types'
import { mutations } from '../store/spareData'
interface AccessForm {
  name: string
  admin: any
  areaList: any
  address: string
  memo: string,
  id?: any
}
@Component({
  name: 'createWareHouse',
  components: {
    breadcrumb
  }
})
export default class SparePartsAddOrEdit extends Vue {
  @Prop() private areaOptions!: []
  @Prop({ default: [] }) private titleArr!: any
  @Prop() private edit!: boolean

  private $message: any
  private $store: any

  private firstName: string = 'houseInfo'

  private openUserList: any = [] // 启用的座席列表

  public accessForm: AccessForm = { // 仓库信息
    name: '',
    admin: '',
    areaList: [],
    address: '',
    memo: ''
  }

  private rules: object = { // 备件信息的校验
    name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
    admin: [{ required: true, message: '请选择仓库管理员', trigger: 'change' }],
    areaList: [{ required: true, message: '请输入所属地区', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
  }

  private props = {
    checkStrictly: true,
    multiple: false,
    children: 'children',
    label: 'fullname',
    value: 'id'
  }

  private saveFun () {
    const formRef = this.$refs.accessForm as ElForm
    const { name, admin, areaList, address, memo, id } = this.accessForm
    const sendData = {
      name,
      admin: admin ? [admin] : [],
      province: areaList && areaList.length && areaList[0],
      city: areaList && areaList.length >= 2 ? areaList[1] : '',
      area: areaList && areaList.length === 3 ? areaList[2] : '',
      address,
      memo
    }
    const actionData = {
      url: this.edit ? '/server-work/action/wareHouse/update' : '/server-work/action/wareHouse/create',
      method: 'post',
      data: this.edit ? { ...sendData, id } : sendData
    }
    formRef.validate(valide => {
      if (valide) {
        commonAction(actionData).then(res => {
          if (res.success) {
            this.$message.success(`${this.edit ? '修改' : '创建'}成功`)
            this.getAllHouseOptions()
            this.$emit('handleSaveFun')
          }
        })
      }
    })
  }

  private getAllHouseOptions () { // 获取仓库数据（包含删除）
    commonAction({
      url: '/server-work/action/wareHouse/query',
      method: 'post',
      data: { isIncludeDel: true }
    }).then(res => {
      if (res.success) {
        mutations.setStateData('obj', 'allHouseObj', res.data.wareHouseItemList)
      }
    })
  }

  private cancelFun () {
    this.$emit('cancelFun')
  }

  private breadcrumbBack () {
    this.$emit('pageBack')
  }

  private mounted () {
    this.openUserList = (this.$store as Store<any>).state.common.publicCache.userListEnable || []
  }
}
</script>

<style lang="stylus" scoped>
.houseeBox
  border 1px solid $border-main
  border-radius 10px
  height calc(100vh - 86px)
  overflow auto
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
  .el-tabs
    margin 12px 24px 60px
  .el-form
    display flex
    flex-wrap wrap
    .el-form-item
      width 40%
      margin-right 24px
    .remarks
      &.el-form-item
        width calc(80% + 24px)
  .more-btn
    bottom -1px
    right 1px
    width 99%
    height 60px
    padding 0 16px
    line-height 48px
    text-align right
    position absolute
    background #fff
    z-index 20
      .cancel
        margin-right 10px
.el-cascader
  width 100%
</style>
